<template>
  <view class="container">
    <!-- <view class="banner-box">
      <image src="/static/banner.jpg" class="banner"></image>
    </view> -->
    <mescroll-uni top="20" bottom="140" @init="mescrollInit1" @down="downCallback1" @up="upCallback1"
      :down="downOption1" :up="upOption1" class="message">
      <view class="banner-box">
        <image src="/static/banner.jpg" class="banner"></image>
      </view>
      <view v-if="list1.length != 0">
        <view class="product-item" v-for="(item, index) in list1" :key="item.id">
          <image :src="item.product.product_img" mode="aspectFill" class="goods-img"></image>
          <view class="product-info">
            <view class="product-name-box">
              <view>{{ item.product.product_name }}</view>
              <view class="details" @click="handleClickDetails(item)">
                <text>详情</text>
                <u-icon name="arrow-right" color="#666" size="14"></u-icon>
              </view>
            </view>
            <view class="wrap">
              <view class="product-price">￥{{ item.product.sale_price }}</view>
              <view class="quantity-container" v-if="index == 0">
                <!-- <view @click="handlePushWindow" class="btn">上橱窗</view> -->
                <!-- <view @click="getUrl" class="btn">上橱窗</view> -->
                <!-- <view @click="openUrl" class="btn">打开授权链接</view> -->
                <view @click="handleClickBtn(item)" class="btn btn1">去购买</view>
                <!-- <view @click="handleClickBtn2(item)" class="btn btn2">详情</view> -->
              </view>
            </view>
          </view>
        </view>
        <!-- <web-view src="{{authUrl}}"></web-view> -->
      </view>
      <!-- <view v-else class="empty-box">
        <image src="/static/mescroll-empty.png" class="empty-img"></image>
        <view>暂无商品列队</view>
      </view> -->
    </mescroll-uni>
    <!-- <view class="bottom-btn" v-if="!userInfo && list1.length == 0">
     <view class="login-btn" @click="$utils.toPage('/pages/login/login')">点击登录</view>
    </view> -->

    <!-- 点击去登录按钮 -->
    <!-- <navigator 
     hover-class="navigator-hover"
     target="miniProgram"
     open-type="navigate"
     :app-id="auth_wxa_appid"
     :url="auth_wxa_path">
      跳转到授权页
    </navigator> -->
    <!-- <web-view src="partner/pages/auth/index?authkey=0_HOt3U6YzEm1p2gQjDNAWLOVkUGbWDS11jUqRfpE3JZhYOTTwQ58uIh6b1bBQ7bQ1pc4BqBWQimyvHaA">123456</web-view> -->
    <!-- 橱窗授权模态框 -->
    <u-modal :show="show" :title="title" :content='content' @confirm="confirm"></u-modal>
    <u-popup :show="isShowPopup" mode="bottom" @close="close">
      <view class="popup-content">
        <!-- <view class="popup-title">详情</view>
        <view class="line"></view>
        <view class="goods-box">
          <view>
            <view class="goods-name">{{userData.product_name}}</view>
            <view class="goods-price">￥{{userData.sale_price}}</view>
          </view>
          <view class="goods-img">
            <image :src="userData.product_img" class="img"></image>
          </view>
        </view> -->
        <view class="order-num">订单编号：{{userData.order_id}}</view>
        <view class="order-title">创建时间：{{userData.create_time}}</view>
        <view class="line"></view>
        <view class="user-box">
          <view class="user-img">
            <image :src="userData.avatar" class="avatar-img"></image>
          </view>
          <view>
            <view class="user-txt">昵称</view>
            <view>
              <u--input v-model="userData.nickname" class="input-txt" :disabled="true"  disabledColor="#F5F1F4"></u--input>
            </view>
          </view>
          <view>
            <view class="user-txt">用户ID</view>
            <view>
              <u--input v-model="userData.user_id" class="input-txt" :disabled="true"  disabledColor="#FCEBEC"></u--input>
            </view>
          </view>
          <view>
            <view class="user-txt">电话</view>
            <view>
              <u--input v-model="userData.mobile" class="input-txt" :disabled="true"  disabledColor="#F5F1F4"></u--input>
            </view>
          </view>
          <view>
            <view class="user-txt">视频号ID</view>
            <view>
              <u--input v-model="userData.videoid" class="input-txt" :disabled="true"  disabledColor="#FCEBEC"></u--input>
            </view>
          </view>
          <view>
            <view class="user-txt">性别</view>
            <view>
              <u--input v-model="userData.sex" :disabled="true"  disabledColor="#F5F1F4"></u--input>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {
  mapState,
  mapActions
} from 'vuex';
export default {
  component: {},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      show: false,
      title: '提示',
      content: '该用户还未获得橱窗授权,请点击确认按钮进行跳转授权',
      // productList: [],
      authUrl: 'https://channels.weixin.qq.com/miniprogram/live-commerce/auth?authkey=0_1234',
      loading: "",
      text: "全部",
      isShowNoMore1: false,
      mescroll1: null,
      downOption1: {  //上拉加载下一页
        auto: true,
      },
      upOption1: {
        textNoMore: "我是有底线的 >_<",
        auto: false,
        page: {
          num: 0,    //起始页
          size: 10,  //一页条数
        }
      },
      searchForm1: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      list1: [],
      auth_wxa_appid: 'wx30847f81721b1ba6',
      auth_wxa_path: 'partner/pages/auth/index?authkey=0_HMaOHebydFXLj_4TiQuiUTUQuym4vYxdUjMDGWNWQ1feV7fZlBFtMmgO0AH_eDkHuT6tSjbCYNIG8vA',
      videoid: '',
      userData: {
        product_name: '',
        sale_price: '',
        product_img: '',
        order_id: '',
        create_time: '',
        nickname: '',
        sex: '',
        mobile: '',
        avatar: '',
        user_id: '',
        order_id: '',
        videoid: '',
      },
      isShowPopup: false,
    };
  },
  computed: {
    ...mapState('user', {
      userInfo: 'userInfo',
    }),
  },
  mounted() {
    // this.getData1();
  },
  methods: {
    handleClickDetails(v) {
      this.isShowPopup = true;
      this.userData.product_name = v.product.product_name;
      console.log(this.userData.product_name);
      this.userData.sale_price = v.product.sale_price;
      this.userData.product_img = v.product.product_img;
      this.userData.order_id = v.product.order_id;
      this.userData.create_time = v.create_time;
      this.userData.nickname = v.user.nickname;
      this.userData.sex = v.user.sex;
      this.userData.mobile = v.user.mobile;
      this.userData.avatar = v.user.avatar;
      this.userData.user_id = v.user_id;
      this.userData.order_id = v.order_id;
      this.userData.videoid = v.videoid;
    },
    close() {
      this.isShowPopup = false;
    },
    //获取用户信息
    getUserInfo() {
      this.$api.baseInfo.getUserInfo().then(res => {
        console.log(res);
        let data = res.data;
        if (!data.videoid) {
          uni.$u.toast('请先到个人设置页面，设置个人视频号ID');
        } else {
          wx.openChannelsUserProfile({
            finderUserName: this.videoid,
          });
        }
      })
    },
    getData1() {
      // if (!this.userInfo) {
      //   this.mescroll1.endBySize(0, 0);
      //   return;
      // }
      uni.showLoading({
        mask: true,
        title: '数据加载中...'
      })
      this.$api.index.wechatstoreQueue(this.searchForm1.page, this.searchForm1.pageSize)
        .then(({ data }) => {
          uni.hideLoading();
          console.log("data");
          console.log(data);
          // 接口返回的当前页数据列表 (数组)
          let curPageData = data.data;
          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
          let curPageLen = curPageData.length;
          // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
          let totalSize = data.total;
          if (this.searchForm1.page == 1) this.list1 = []; //如果是第一页需手动置空列表
          this.list1 = [...this.list1, ...data.data];
          this.mescroll1.endBySize(curPageLen, totalSize);
          setTimeout(() => {
            this.mescroll1.endSuccess(curPageLen)
          }, 20)
        }).catch(() => {
          //  请求失败,隐藏加载状态
          this.mescroll1.endErr()
        });
    },
    mescrollInit1(mescroll) {
      console.log(mescroll);
      this.mescroll1 = mescroll;
    },
    downCallback1(mescroll) {
      console.log("downcallback")
      //重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
      mescroll.resetUpScroll();
    },
    upCallback1(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      this.searchForm1.page = pageNum;
      this.getData1();
    },
    handlePushWindow() {
      // console.log(this.$api);
      let obj = {
        // finder_id: 'sphNTAw1Ls1jwvP', //小不的
        // finder_id: 'sphzK3CJ3YQvAB5', //木木的
        finder_id: 'sphLVjnq6ZQ5oA0', //我的
      }
      //获取达人橱窗授权状态
      this.$api.index.getPromoterStatus(obj).then(res => {
        console.log(res);
        // window_auth_status 0 没有获得授权 
        let data = res.data;
        let tempObj = {
          openfinderid: data.openfinderid,
          opentalentid: data.opentalentid,
          window_auth_status: data.window_auth_status,
        }
      })
    },
    //获取达人授权链接
    getUrl() {
      let obj = {
        // finder_id: 'sphNTAw1Ls1jwvP', //小不的
        // finder_id: 'sphzK3CJ3YQvAB5', //木木的
        finder_id: 'sphLVjnq6ZQ5oA0', //我的
        // openid: 'obBz063NDE8_ssfv0FgwpHkifm6Y', //我的openid
      }
      this.$api.index.getAuthorizePromoter(obj).then(res => {
        console.log(res);
        let data = res.data.auth_info;
        console.log(data)
        this.authUrl = data.auth_url;
        // let tempObj2 = {
        //   auth_url: data.auth_url,
        //   auth_wxa_username: data.auth_wxa_username,
        //   auth_wxa_appid: data.auth_wxa_appid,
        //   auth_wxa_path: data.auth_wxa_path,
        // }
        this.auth_wxa_appid = data.auth_wxa_appid;
        this.auth_wxa_path = data.auth_wxa_path;
      })
    },
    //添加商品到指定橱窗
    handleStoreAddGoods() {
      let productObj = {
        product_id: '10000221324131',
        finder_id: 'sphLVjnq6ZQ5oA0',
      }
      this.$api.index.addProduct(productObj).then(res => {
        console.log(res);
      })
    },
    confirm() {
      this.show = false;
    },
    openUrl() {
      console.log(123);
      // wx.navigateTo({ url: '/pages/webview?url=' + encodeURIComponent(this.authUrl) })
    },
    handleClickBtn(v) {
      console.log(v);
      this.videoid = v.videoid;
      this.getUserInfo();
    }
  }
};
</script>
<style scoped>
.container {
  padding: 20rpx;
}

.product-item {
  display: flex;
  border-bottom: 1rpx solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20rpx;
  margin: 0 20rpx;
}

.product-item image {
  width: 200rpx;
  height: 200rpx;
}

.product-info {
  flex: 1;
  padding: 10rpx 0rpx 0 20rpx;
}

.product-name {
  width: 20vh;
  text-overflow: ellipsis;
  overflow: hidden;
}

.product-name-box {
  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
}

.details {
  font-size: 28rpx;
  color: #666;
  /* text-decoration: underline; */
  display: flex;
  align-items: center;
}

.product-price {
  font-size: 32rpx;
  color: red;
  margin-top: 10rpx;
  font-weight: bold;

}

.quantity-container {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}


.banner {
  width: 100%;
  height: 240rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.goods-img {
  border-radius: 18rpx;
}

.quantity-container .btn {
  /* background: #f59928 !important; */
  border-radius: 40rpx !important;
  width: 130rpx !important;
  height: 52rpx !important;
  /* color: #fff !important; */
  text-align: center;
  font-size: 28rpx;
  line-height: 52rpx;
}

.btn1 {
  border: 1rpx solid #2672fc;
  color: #2672fc;
}

.btn2 {
  margin-left: 20rpx;
  border: 1rpx solid #666;
  color: #666;
}

.wrap {
  margin-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.empty-img {
  width: 240rpx;
  height: 240rpx;
}

.empty-box {
  text-align: center;
  margin-top: 200rpx;
  font-size: 26rpx;
  color: #7a7474;
}

.banner-box {
  margin: 0 20rpx;
  height: 240rpx;
}

.goods-box {
  display: flex;
  justify-content: space-between;
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
}

.img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.popup-content {
  margin: 20rpx;
}

.goods-name {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  margin: 30rpx 0
}

.line {
  border-bottom: 1rpx dashed #eee;
  margin: 30rpx 0;
}

.order-num {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.order-title {
  font-size: 28rpx;
}

.goods-price {
  font-size: 28rpx;
  color: #f00;
  font-weight: 600;
}

.user-img {
  text-align: center;
}

.avatar-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 100%;
  border: 1rpx solid #eee;
}

.user-txt {
  font-size: 28rpx;
  margin: 10px 0;
}

.bottom-btn {
  text-align: center;
  display: flex;
  /* position: relative; */
}

.login-btn {
  width: 260rpx;
  height: 70rpx;
  background: #2672fc;
  /* border: 1rpx solid #2672fc; */
  text-align: center;
  line-height: 70rpx;
  /* color: #2672fc; */
  color: #fff;
  border-radius: 60rpx;
  font-size: 28rpx;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}
</style>